<template>
  <el-dialog v-model="dialogFormVisible" title="修改活动信息">
    <el-form
      ref="ruleFormRef"
      :model="categoryForm"
      :label-width="formLabelWidth"
      size="large"
      :rules="rules"
    >
      <el-form-item label="ID" prop="activity_categoryId">
        <el-input
          v-model="categoryForm.activity_categoryId"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="活动类别名称" prop="activity_categoryName">
        <el-input v-model="categoryForm.activity_categoryName"></el-input>
      </el-form-item>
      <el-form-item label="描述">
        <el-input
          v-model="categoryForm.activity_categoryDes"
          :rows="5"
          type="textarea"
          placeholder="Please input"
        />
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group
          v-model="categoryForm.activity_categoryState"
          class="ml-4"
        >
          <el-radio label="1" size="large">开启</el-radio>
          <el-radio label="2" size="large">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submit(ruleFormRef)">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, defineExpose, computed, watch } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
const store = useStore()
const { getters, dispatch } = store
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const categoryForm = reactive({
  activity_categoryId: 0,
  activity_categoryName: '',
  activity_categoryDes: '',
  activity_categoryState: '1',
  activity_status: 1
})
const changeDialogFormVisible = () => {
  dialogFormVisible.value = !dialogFormVisible.value
}
defineExpose({
  changeDialogFormVisible
})
// 获取category
const category = computed(() => getters.activityCategory)
watch(category, (newValue, oldValue) => {
  for (const key in newValue) {
    if (Object.hasOwnProperty.call(newValue, key)) {
      categoryForm[key] = newValue[key]
    }
  }
})
// 表单校验
const ruleFormRef = ref()
const rules = reactive({
  activity_categoryId: [
    { required: true, message: 'ID不能为空', trigger: 'blur' }
  ],
  activity_categoryName: [
    { required: true, message: '活动类别名称不能为空', trigger: 'blur' }
  ]
})
const pagination = computed(() => getters.categoryPagination)
// 确定按钮
const submit = (formEl) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      const category = {
        activity_categoryId: 0,
        activity_categoryName: '',
        activity_categoryDes: '',
        activity_categoryState: '1',
        activity_status: 1
      }
      for (const key in categoryForm) {
        if (key !== 'date') {
          if (Object.hasOwnProperty.call(categoryForm, key)) {
            category[key] = categoryForm[key]
          }
        }
      }
      await dispatch('activity/updateCategory', category).then(
        (result) => {
          ElMessage({
            message: result.msg,
            type: 'success'
          })
          dispatch('activity/getCategoryList', { pagination })
          changeDialogFormVisible()
        },
        (result) => {
          ElMessage({
            message: result.msg,
            type: 'warning'
          })
        }
      )
    } else {
      return false
    }
  })
}
</script>
